import React, { useState } from 'react'
import './index.css'
import Card from '../UI/Card/index'
export const ItemForm = porps => {
  const [form, setForm] = useState({
    date: '',
    top: '',
    bottom: ''
  })

  const handleChange = key => e => setForm({ ...form, [key]: e.target.value })

  const onSubmit = e => {
    // 阻止事件默认行为
    e.preventDefault()
    const newItem = {
      date: new Date(form.date),
      top: form.top,
      bottom: +form.bottom
    }
    setForm({
      date: '',
      top: '',
      bottom: ''
    })
    porps.onAddItem(newItem)
  }
  return (
    <Card className='item-form'>
      <form onSubmit={onSubmit}>
        <div className='form-control-label'>
          <label htmlFor='date'>日期</label>
          <input
            onChange={handleChange('date')}
            type='date'
            id='date'
            value={form.date}
          />
        </div>
        <div className='form-control-label'>
          <label htmlFor='top'>内容</label>
          <input
            onChange={handleChange('top')}
            type='text'
            id='top'
            value={form.top}
          />
        </div>
        <div className='form-control-label'>
          <label htmlFor='bottom'>时长</label>
          <input
            onChange={handleChange('bottom')}
            type='number'
            id='bottom'
            value={form.bottom}
          />
        </div>
        <div className='form-control-btn'>
          <button>添加</button>
        </div>
      </form>
    </Card>
  )
}
